<template>
  <el-dialog v-model="show" :title="title" width="800">
    <div class="post-dox" v-loading="loading">
      <div class="post-input">
        <my-markdown class="article-markdown"
                     v-model="msg" ref="editor" :placeholder="placeholder" :id="boxId"
                     @update="update" :tool-bar-hide="true" :height="height"/>

      </div>
      <div class="post-btn">
        <div class="post-btn-left">
          <div @click="picShow">
            <span class="iconfont icon-tupian"></span>
            图 片
          </div>
          <div @click="addLink()">
            <span class="iconfont icon-youqinglianjie"></span>
            链 接
          </div>
          <div @click="addEmoticon()">
            <span class="iconfont icon-biaoqing"></span>
            表 情
          </div>
          <div class="other">
            <slot/>
          </div>
        </div>
        <div class="post-btn-right">
          <el-button type="primary" size="default" @click="comDiscuss">发 布</el-button>
        </div>
      </div>
      <div class="post-image-box" v-show="postImageShow">
        <el-upload class="post-upload-pic" :action=imgAction :limit="maxCount"
                   list-type="picture-card" :on-remove="handleRemove"
                   :on-preview="handlePictureCardPreview" ref="myImgUpload"
                   :on-success="uploadImageSuccess">
          <span style="font-size: 40px"> + </span>
        </el-upload>
        <el-dialog v-model="dialogVisible">
          <el-image w-full :src="dialogImageUrl" fit="cover"/>
        </el-dialog>
      </div>
      <div class="dialog-box">
        <div class="emoji">
          <el-dialog title="表情包" v-model="emojiShow" width="513px">
            <span class="emoji-item" @click="clickEmoji(item)" :key="i"
                  v-for="(item,i) in [...emoji_small,...emoji_animal]">{{ item }}</span>
          </el-dialog>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import {ref, onMounted, watch,defineModel} from "vue";
import MyMarkdown from "@/components/markdown/myMarkdown.vue";
import {userStore} from "@/stores/userStore.js";
import {emoji_small} from '../markdown/icon/emoji2.js'
import {emoji_animal} from '../markdown/icon/emoji1.js'
import {constantStore} from "@/stores/constantStore.js";
import {successCode} from "@/api/httpApi/base/http.js";
// useHead({
//   script: [
//     {
//       src: "https://unpkg.com/vditor@3.8.18/dist/js/lute/lute.min.js",
//       id: "vditorLuteScript",
//     },
//   ],
// });
const show = defineModel('show')
const msg = defineModel('msg')

/*初始化*/
/*父组件传值*/
const props = defineProps({
  // msgShow: {
  //   type: Boolean,
  //   default: true
  // },
  title: {
    type: String,
    default: ""
  },
  maxCount: {
    type: Number,
    default: 5
  },
  boxId: {
    type: Number,
    default: 5
  },
  topicName: {
    type: String,
    default: ""
  },
  imgAction: {
    type: String,
    default: "/portal/image/"
  },
  placeholder: {
    type: String,
    default: "支持Markdown格式"
  },
  clearInfo: {
    type: Number,
  },
  height: {
    type: Number,
    default: 280
  },
  loading: {
    type: Boolean,
    default: false
  }
})

/*全局变量*/

/*全局方法*/
function update(val) {
  msg.value = val
}

watch(() => props.clearInfo, (newVal) => {
  clearInfo()
})

const myImgUpload = ref()

/*============提交=============*/
function clearInfo() {
  imagesList.value = [];
  msg.value = "";
  postImageShow.value = false;
  editor.value.vditorMarkDown.setValue("")
  myImgUpload.value.clearFiles();
}

/*==============图片相关=============*/
const postImageShow = ref(false);
const dialogVisible = ref(false);
const dialogImageUrl = ref("");
const imagesList = ref([]);

function picShow() {
  if (checkIsLogin()) {
    postImageShow.value = !postImageShow.value
  }
}

function handlePictureCardPreview(file) {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}

function handleRemove(file) {
  let url = constantStore().imageUrl + file.response.data;
  for (let i = 0; i < imagesList.value.length; i++) {
    if (imagesList.value[i] === url) {
      imagesList.value.splice(i, 1);
      break;
    }
  }
  if (imagesList.value.length === props.maxCount - 1) {
    let picUpload = document.querySelector(".post-upload-pic .el-upload--picture-card");
    picUpload.style.display = "";
  }
}

function uploadImageSuccess(res) {
  if (res.code === successCode) {
    imagesList.value.push(constantStore().imageUrl + res.data);
    if (imagesList.value.length >= props.maxCount) {
      let picUpload = document.querySelector(".post-upload-pic .el-upload--picture-card");
      picUpload.style.display = "none";
    }
  }
}

/*=============添加链接=============*/
const editor = ref()

function addLink() {
  if (checkIsLogin()) {
    editor.value.linkShow = true;
  }
}

/*==========表情===============*/
let emojiShow = ref(false)

function addEmoticon() {
  if (checkIsLogin()) {
    emojiShow.value = true;
  }
}

function clickEmoji(item) {
  editor.value.vditorMarkDown.insertValue(item);
}

/*===================用户是否登录==================*/
function checkIsLogin() {
  if (!userStore().user) {
    editor.value.vditorMarkDown.focus();
    return false;
  } else {
    return true;
  }
}
</script>

<style scoped>
:deep(.emoji .el-dialog__body) {
  padding: 0;
}

.emoji-item {
  padding: 5px;
  cursor: pointer;
  font-size: 30px;
  user-select: none;
}

:deep(.link-dialog .el-dialog) {
  width: 40rem;
}

:deep(.link-dialog .el-dialog__header) {
  margin: auto;
}

:deep(.el-upload-list__item img) {
  object-fit: cover;
}

.post-image-box {
  margin-top: 10px;
}

:deep(.post-input .vditor-toolbar) {
  display: none;
}

.post-btn-left > div:hover {
  color: #2e86ef;
}

.post-btn-left > div {
  margin-right: 15px;
  cursor: pointer;
  user-select: none;
}

.post-btn-left {
  display: flex;
  padding: 10px 20px;
}

.post-btn {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.post-input {

}

.post-dox {
  margin-top: 10px;
  border-radius: 10px;
  padding: 20px;
  background-color: rgb(255, 255, 255);

}
</style>
